<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑话首页</title>
    <link rel="stylesheet" href="/CSS/笑话首页/iconfont.ttf">
    <link rel="stylesheet" href="/CSS/笑话首页/iconfont.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            font-size: 12px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        a {
            list-style: none;
            color: black;
        }

        header {
            width: 100%;
            height: auto;
            position: relative;
            display: flex;
            flex-wrap: wrap;
        }

        header img {
            width: 100%;
            height: auto;
            max-height: 100px;
        }

        header div {
            width: 100%;
            position: relative;
        }

        header .first ul {
            width: 100%;
            height: 40px;
            background-color: #f90;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-size: 0.8rem;
        }

        header .first ul li {
            padding-left: 15px;
            padding-right: 15px;
        }

        header .second ul {
            width: 100%;
            height: 40px;
            background-color: #faf9f7;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #333;
            font-size: 0.8rem;
            justify-content: space-evenly;
            border-bottom: 1px solid lightgrey;
        }

        main {
            width: 100%;
            height: auto;
            min-height: calc(100vh - 180px);
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            position: relative;
        }

        main div .text {
            height: auto;
            background-color: white;
            margin-top: 10px;
            position: relative;
            padding: 10px;
        }
        main div .text h3{
            margin-top: 10px;
            color: #f90;
        }

        main div .title {
            width: 100%;
            height: auto;
            background-color: white;
            margin-top: 10px;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }


        main div .title .one{
            margin-left: -30px;
        }
        main div .title .two{
            margin-left: -30px;
        }


        main div .image {
            width: 100%;
            height: auto;
            background-color: white;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
            border-top: 1px solid lightgrey;
            padding: 10px;
        }

        main div .advert1 {
            width: 100%;
            height: 40px;
            background-color: white;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid lightgrey;
            color: white;
            padding: 10px;

        }

        main div .advert1 div {
            width: 80%;
            height: 40px;
            text-align: center;
            margin-top: 15px;
        }

        main div .advert1 div p {
            width: 100%;
            background-color: #f90;
            padding: 10px;
            border-radius: 10px;
        }

        main div .advert2 {
            width: 100%;
            height: auto;
            background-color: white;
            position: relative;
            display: flex;
            margin-top: 10px;
            border-top: 1px solid lightgrey;
            color: white;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
        }

        main div .advert2 div {
            width: 100%;
            height: 10px;
            background-color: white;
            position: relative;
            display: flex;
            color: black;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
        }


        main div .game {
            width: 100%;
            height: auto;
            background-color: white;
            position: relative;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin-top: 10px;
            border-top: 1px solid lightgrey;
            color: black;
            padding: 10px;
        }

        main div .game div {
            width: 20%;
            height: auto;
            text-align: center;
        }

        footer {
            width: 100%;
            height: 40px;
            bottom: 0;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            background-color: #f90;
        }

        footer ul {
            width: 100%;
            height: 100%;
            background-color: #f90;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            color: white;
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <header>
        <img src="/素材/img/笑话首页/头部1.jpg" alt="">

        <div class="first">
            <ul>
                <li class="fire"><span class="iconfont icon-redu"></span></li>
                <li>笑话大全</li>
                <li class="head"><span class="iconfont icon-31wode"></span></li>
            </ul>
        </div>

        <div class="second">
            <ul>
                <li>推荐</li>
                <li>笑话</li>
                <li>趣图</li>
                <li>视频</li>
                <li>鉴笑</li>
            </ul>
        </div>
    </header>

    <main>
        <div>
            <div class="text">
                <h2>倒霉的病人</h2>
                <p>有一个牙科以生，第一次给病人拔牙，非常紧张。他刚把幼齿拔下来，不料收一抖，没有家住，于是，牙齿掉进了...</p>
                <h3>查看原文</h3>
            </div>

            <div class="title">
                <span class="iconfont icon-yonghu"></span>
                <p class="one">ZOL中国海淀区网络</p>
                <p class="two">2天前赞过</p>
                <button>综合</button>
            </div>

            <div class="image">
                <div><span class="iconfont icon-daxiao"></span>30</div>
                <div><span class="iconfont icon-kulian"></span>15</div>
                <div><span class="iconfont icon-liuyan">0</div>
                <div><span class="iconfont icon-fenxiang"></div>
            </div>

            <div class="advert1">
                <div>
                    <p>浏览更多笑话，每天好心情~</p>
                </div>
            </div>

            <div class="advert2">
                <div>
                    <span class="iconfont icon-youxi"></span>
                    <p>游戏精选</p>
                    <p>更多></p>
                </div>
            </div>

            <div class="game">
                <div>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                </div>

                <div>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                </div>

                <div>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                </div>

                <div>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                    <img src="/素材/img/笑话首页/王者荣耀.png" alt="">
                    <P>王者荣耀</P>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <ul>
            <li>首页</li>
            <li>报价</li>
            <li>壁纸</li>
            <li>论坛</li>
            <li>应用</li>
        </ul>

    </footer>
</body>

</html>    